<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过选择器获取JQuery对象</title>
		<script src="../js/jquery-3.7.1.min.js"></script>
		<script>
			// $(选择器) 获取jquery对象
			// dom对象，jquery对象
			// innerHTML	.html()
			$(function(){
				/* $('.box').css('width','400px')
				$('.box').css('height','200px')
				$('.box').css('background-color','bisque') */
				$('.box').css({
					'width':'400px',
					'height':'200px',
					'background-color':'bisque',
					'margin-bottom':'20px'
				})
				// .item => border 1px red
				// .other .mini => padding:10px,background
				$('.item').css({
					'border':'1px solid red'
				})
				$('.other.mini').css({
					'padding':'10px',
					'backgroundColor':'green'
				})
				/* 
					div.other>div.mini	
					
					<div class="other">
						<div class="mini"></div>
					</div>
				 */
				/* 
					空格( E F):后代选择器
					> ( E > F):子代选择器
					+ ( E + F):E是F紧邻的哥哥		.next()
					~ ( E ~ F):F是E后面所有同辈兄弟	.nextAll()
							所有同辈元素				.siblings()
				 */
				// $('#one + .box').css('border','2px dashed red')
				// $('#one ~ .box').css('color','#fff')
				$('#one').next('.box').css('border','2px dashed red')
				$('#one').nextAll('.box').css('color','#fff')
			})
		</script>
		<!-- <style>
			.box{
				width: 400px;
				height: 200px;
				background-color: bisque;
				
			}
		</style> -->
	</head>
	<body>
		<div id="one" class="box">
			<div class="item">class为item的div</div>
			<span class="item">class为item的span</span>
		</div>
		<div id="two" class="box">
			<div class="item">class为item的div</div>
			<span class="item">class为item的span</span>
		</div>
		<div id="three" class="box">
			<div class="item mini">class为item的div</div>
			<span class="item mini">class为item的span</span>
		</div>
		<div id="four" class="box">
			<div class="other mini">class为other的div</div>
			<span class="other mini">class为other的span</span>
		</div>
	</body>
</html>